import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { Modal, Button, tools, TextareaItem, Toast } from 'weaver-mobile';
const { getLabel } = tools;
const prompt = Modal.prompt;

@inject("docExchangeStore")
@observer
class resonModal extends Component {

  render() {
    const { modalVisible, setState, reasonCheck, btnType, textareaValue } = this.props;
    let modalTile = '';
    let modalBtn = '';
    if (btnType == 'batchDel') {
      modalTile = '请说明作废理由：';
      modalBtn = '作废';
    } else if (btnType == 'batchRejection') {
      modalTile = '请说明拒收理由：';
      modalBtn = '拒收';
    } else if (btnType == 'batchSendBack') {
      modalTile = '请说明退回理由：';
      modalBtn = '退回';
    } else if (btnType == 'back') {
      modalTile = '请说明撤销理由：';
      modalBtn = '撤销';
    }
    
    return (<Fragment>
      {modalVisible &&
        <Modal
          visible={modalVisible}
          transparent
          wrapClassName='odoc-exchange-resonModal'
          maskClosable={false}
          onClose={this.onClose}
          title={modalTile}
          footer={[
            { text: '取消', onPress: () => { this.onClose() } },
            { text: modalBtn, onPress: () => { reasonCheck() } }
          ]}
        // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
        >
          <div style={{ height: 150, overflow: 'scroll', border: '1px solid #ccc', display: 'inline-block',width: '95%' }}>
            <TextareaItem
              rows={5}
              labelNumber={8}
              onChange={v => {
                setState({
                  textareaValue: v
                })
              }}
          />
        </div>
        {!textareaValue && <span><img src="/images/BacoError_wev9.png" align="absmiddle" /></span>}
        </Modal>
      }
    </Fragment>)
  }
  onClose = () => {
    const { setState } = this.props.docExchangeStore;
    setState({
      modalVisible: false,
    })
  }
  

  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    // if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
    //   return;
    // }
    // const pNode = closest(e.target, '.am-modal-content');
    // if (!pNode) {
    //   e.preventDefault();
    // }
  }
}

export default resonModal;